import React, { useState } from "react";
import MarkdownRenderer from "@/components/MarkdownRenderer/MarkdownRenderer";
import { Input } from "antd";

const { TextArea } = Input;
const initialMarkdown = `
# Markdown 渲染示例

这是一个 **Markdown** 渲染组件的示例。

## 支持的功能
- **加粗** 和 *斜体*
- [链接](https://example.com)
- 代码块：
\`\`\`javascript
console.log("Hello, Markdown!");
\`\`\`

## 使用live-server
\`\`\`bash
# 安装live-server
npm install -g live-server

# 启动服务
npm run live-server
# 或直接使用
live-server --port=8080 --no-browser
\`\`\`

## 表格
| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |

> 引用块示例
`;

const MarkdownRendererDemo: React.FC = () => {
  const [markdown, setMarkdown] = useState(initialMarkdown);

  return (
    <div style={{ display: "flex", gap: "20px" }}>
      <TextArea
        style={{
          width: "50%",
          height: "400px",
          padding: "10px",
          fontSize: "14px",
          border: "1px solid #ddd",
          borderRadius: "6px",
        }}
        value={markdown}
        onChange={(e) => setMarkdown(e.target.value)}
      />
      <div
        style={{
          width: "50%",
          height: "400px",
          overflowY: "auto",
          padding: "10px",
          border: "1px solid #ddd",
          borderRadius: "6px",
          backgroundColor: "#f9f9f9",
        }}
      >
        <MarkdownRenderer content={markdown} />
      </div>
    </div>
  );
};

export default MarkdownRendererDemo;
